<template>
	<div class="wrapper">
		<div class="header">
			  <div class="headerLeft" @click='goBack'><span class="iconfont">&#xe68b;</span></div>
			  <div class="headerMiddle">我的同程</div>
			  <div class="headerRight" @click='isShowClick'>
				  <span class="iconfont">&#xe637;</span>
			  </div>
		</div>
		<div class="loginBtn" @click='loginFn'>
			  <div class="loginBtn_left">
				  <img class='memberIcon' :src="memberImgUrl[this.isImg].imgUrl" >
				  <div class="memberWrapper">
					  <span class="noLogin" v-show='!isShowMember'>登录/注册 </span>
					  <div class="MemberInfor" v-show='isShowMember'>
						  <span class="memberLevel">尊敬的会员</span>
						  <div class="memberImg">
							  <span class="iconfont">&#xe62d;</span> 普卡会员
							  <img src="//pic4.40017.cn/index/slide/2017/03/23/18/5QWgdL.png" >
						  </div>
					  </div>
				  </div>
			  </div>
			  <div class="loginBtn_right">
				  <img src="//pic4.40017.cn/index/slide/2017/02/03/10/5WpEc4.png" >
				  <span>></span>
			  </div>
		</div>
		<transition name="bounce">
			<div class="mydiv" v-if='isShow'>
					 <div class="mydiv2"></div>
					 <div class="content">
						 <div @click="gohome"><span class="iconfont">&#xe61a;</span>首页</div>
						 <div @click="gologin"><span class="iconfont">&#xe6c5;</span>我的同程</div>
						 <div @click="noLoginFn" class="noLogin" v-if='!isLogin'><span class="iconfont">&#xe653;</span>登录/注册</div>
						 <div @click="LoginedFn" class="Logined" v-if='isLogin'><span class="iconfont">&#xe653;</span>登出/注销</div>
					 </div>
			</div>
		</transition>
		
	</div>
  
</template>

<script>
export default {
  name: 'loginHeader',
  data(){
	  return{
		  isShow:false,
		  isShowMember:false,
		  loginId:0,//是否登录
		  isImg:0,
		  isLogin:false,
		  memberImgUrl:[
			  {
				  id:'001',
				  imgUrl:'//pic5.40017.cn/02/000/79/55/rBLkCVpVxdeAMfR6AAAPea7J_mw319.png'
			  },
			  {
				  id:'002',
				  imgUrl:'//pic3.40017.cn/member/face/2017/12/05/16/tcdefault_90x90_00.png'
			  }
		  ]
	  }
  },
  methods:{
	  gohome(){
		  this.$router.push('/')
	  },
	  gologin(){
		  this.$router.push('/login')
		  this.$router.go(0)
	  },
	  noLoginFn(){
		  this.$router.push('/loginPage')
	  },
	  LoginedFn(){
		  this.$store.state.loginId=0
		  this.isLogin=false
		  sessionStorage.removeItem("loginId")
		  this.gologin()
	  },
	  goBack(){
		  this.$router.push('/')
	  },
	  isShowClick(){
		  this.isShow=!this.isShow
	  },
	  loginFn(){
		  console.log(this.$store.state.islogin)
		  if(this.$store.state.loginId){
			  alert('已登录')
		  }else{
			  this.$router.push('./loginPage')
		  }
	  }
  },
  mounted(){
	  if(sessionStorage.getItem("loginId")){
		  this.$store.commit('isChangeloginId',parseInt(sessionStorage.getItem("loginId")))
	  }
	  this.loginId=this.$store.state.loginId
	  console.log(this.loginId)
	  if(this.loginId>0){
		  this.isImg=1
		  this.isShowMember=true
	  }else{
		  this.isImg=0 
		  this.isShowMember=false
	  }
	  if(this.$store.state.loginId){
		  this.isLogin=true
	  }else{
		  this.isLogin=false
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
	.bounce-enter-active {
	  transition: all .3s ease;
	}
	.bounce-leave-active {
	  transition: all .2s ease;
	}
	.bounce-enter, .bounce-leave-to
	{
	  transform: translateX(2rem);
	  opacity: 0;
	}
	.mydiv{
		padding-top: .1rem;
		width: 2.5rem;
		height:2.5rem;
		border: 1px solid #000;
		background: #333;
		position: absolute;
		display: block;
		top: 0.9rem;
		right: 0.1rem;
		border-radius: 0.2rem;
		z-index: 200;
	}
	.mydiv2{
		position: absolute;
		top: -0.12rem;
		right: 0.3rem;
		height: 0.22rem;
		width: 0.22rem;
		box-shadow: 1px 1px 2px rgba(0,0,0,.06);
		background-color: #333;
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-sand-transform: rotate(135deg);
	}
	.content{
		width: 100%;
		color:#fff;
		
	}
	.content>div{
		width: 100%;
		font-size: 0.33rem;
		margin:0.2rem 0;
		border-bottom:1px solid #555;
		padding-bottom: 0.1rem;
	}
	.content>div .iconfont{
		margin:0 0.2rem;
		font-size: 0.4rem;
	}
</style>
<style lang="stylus" scoped>
.wrapper
	.header
		width:100%
		display:flex
		padding:0.25rem
		box-sizing:border-box
		.headerLeft
			float:left
			font-weight:bold
			color:#31c2b2
		.headerMiddle
			flex:1
			text-align:center
			font-size:0.35rem
			font-weight:bold
		.headerRight
			float:right
			text-align:right
			font-weight:bold
			color:#31c2b2
	.loginBtn
		width:100%
		background:#00c8b3
		height:2rem
		display:flex
		box-sizing:border-box
		.loginBtn_left
			line-height:2rem
			width:60%
			position:relative
			.memberIcon
				width:1.5rem
				margin-left:0.3rem
				border-radius:1rem
			.memberWrapper
				width:75%
				position:absolute
				top:-0.1rem
				left:2rem
				.noLogin
					font-size:0.4rem
					margin-left:0.1rem
					color:#fff
					font-weight:300
					line-height:2.2rem
				.MemberInfor
					color:#fff
					.memberLevel
						font-size:0.4rem
					.memberImg
						position:absolute
						top:0.4rem
						.iconfont
							font-size:0.25rem
						img
							margin-left:0.1rem
							width:1rem
		.loginBtn_right
			width:40%
			line-height:2rem
			margin:0 auto
			text-align:right
			margin-right:0.22rem
			img
				width:1.8rem
			span
				color:#fff
				font-size:0.2rem
</style>
